<template>
    <div class="container">
        <!-- 下层轮播 -->
        <div class="banner">
            <el-carousel height="100vh" :interval="6000">
                <el-carousel-item>
                    <img src="../../../public/images/background1.png" alt="">
                </el-carousel-item>
                <el-carousel-item>
                    <img src="../../../public/images/background1.png" alt="">
                </el-carousel-item>
            </el-carousel>
        </div>
        <!-- 上层板块 -->
        <div class="content">
            <header :class="{ 'headerBlacK': this.headerBlack }">
                <img class="code" @click="isShowQRcode" src="../../../public/images/code.png" alt="">
                <div class="QRcode" v-if="showQRcode"></div>
                <div class="title">
                    <img src="../../../public/images/title.png" alt="">
                </div>
                <div class="nav">
                    <ul @mouseenter="isShowNav">
                        <li style="color: orange;" @click="toHome">首页</li>
                        <li>&emsp;导览&emsp;</li>
                        <li>&emsp;公告&emsp;</li>
                        <li>&emsp;荣誉&emsp;</li>
                        <li>报名详情</li>
                        <li>佳作展示</li>
                        <li @click="toScores">成绩查询</li>
                        <li>&emsp;关于&emsp;</li>
                    </ul>
                </div>
            </header>
            <!-- 弹出子菜单 -->
            <transition name="fade">
                <div class="header_nav" v-show="showNav" @mouseleave="closeNav">
                    <ul>
                        <li>&emsp;&emsp;</li>
                        <li>
                            <div @click="toOrganize">组织机构</div>
                            <div @click="toActive">活动项目</div>
                            <div @click="toDemand">作品要求</div>
                            <div @click="toProcess">活动流程</div>
                        </li>
                        <li>
                            <div @click="toPoetry">诗词答题</div>
                            <div @click="toCalligraphy">书法活动</div>
                            <div @click="toArt">美术活动</div>
                            <div @click="toRecite">朗诵活动</div>
                            <div @click="toEssay">征文活动</div>
                        </li>
                        <li>
                            <div @click="toActiveHonor">活动荣誉</div>
                            <div @click="toHonor">荣誉实拍</div>
                        </li>
                        <li>
                            <div @click="toSubmit">提交方式</div>
                            <div @click="toContact">联系我们</div>
                        </li>
                        <li>
                            <div @click="toNowTerm">本届佳作</div>
                            <div @click="toBeforeTerm">往届佳作</div>
                        </li>
                        <li>&emsp;&emsp;&emsp;&emsp;</li>
                        <li>
                            <div @click="toOverview">活动概述</div>
                            <div @click="toMedia">媒体报道</div>
                            <div @click="toExemption">免责须知</div>
                        </li>
                    </ul>
                </div>
            </transition>
            <!-- 主体内容 -->
            <slot></slot>
        </div>
    </div>
</template>

<script>
export default {
    name: 'homes',
    data() {
        return {
            showNav: false,
            showQRcode: false,
        }
    },
    props: {
        headerBlack: Boolean,
    },
    methods: {
        isShowNav() {
            this.showNav = true;
        },
        closeNav() {
            this.showNav = false;
        },
        isShowQRcode() {
            this.showQRcode = !this.showQRcode;
        },
        // 跳转
        toActivityCorrelation() {
            this.$router.push('/activityCorrelation');
        },
        toContestCorrelation() {
            this.$router.push('/contestCorrelation');
        },
        toRegisterCorrelation() {
            this.$router.push('/registerCorrelation');
        },
        toOrganize() {
            this.$router.push('/organize');
        },
        toHome() {
            this.$router.push('/home');
        },
        toActive() {
            this.$router.push('/active');
        },
        toDemand() {
            this.$router.push('/demand');
        },
        toProcess() {
            this.$router.push('/process');
        },
        toPoetry() {
            this.$router.push('/poetry');
        },
        toCalligraphy() {
            this.$router.push('/calligraphy');
        },
        toArt() {
            this.$router.push('/art');
        },
        toRecite() {
            this.$router.push('/recite');
        },
        toEssay() {
            this.$router.push('/essay');
        },
        toHonor() {
            this.$router.push('/honor');
        },
        toActiveHonor() {
            this.$router.push('/activeHonor');
        },
        toSubmit() {
            this.$router.push('/submit');
        },
        toContact() {
            this.$router.push('/contact');
        },
        toNowTerm() {
            this.$router.push('/nowTerm');
        },
        toBeforeTerm() {
            this.$router.push('/beforeTerm');
        },
        toMedia() {
            this.$router.push('/media');
        },
        toExemption() {
            this.$router.push('/exemption');
        },
        toOverview() {
            this.$router.push('/overview');
        },
        toScores() {
            this.$router.push('/scores');
        }
    },
}
</script>

<style scoped>
.container {
    width: 100%;
}

.code {
    position: absolute;
    right: 100px;
    top: 40px;
    z-index: 10;
    width: 30px;
    height: 25px;
}

.code:hover {
    cursor: pointer;
}

.QRcode {
    width: 10vw;
    height: 10vw;
    z-index: 10;
    position: absolute;
    top: 72px;
    right: 12px;
    background-size: 100% 100%;
    background-image: url('../../../public/images/background_code.png')
}

.banner {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: fixed;
}

.banner img {
    width: 100vw;
    height: 100vh;
}

.content {
    position: absolute;
    width: 100%;
    /* height: 3500px; */
    background-color: rgba(0, 0, 0, 0);
    z-index: 2;
    top: 0;
}

header {
    position: relative;
    width: 100%;
    height: 25vh;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
}

.nav ul {
    display: flex;
    justify-content: space-between;
    width: 60vw;
    color: white;
    font-size: 20px;
}

.header_nav {
    width: 100%;
    display: flex;
    justify-content: center;
    height: 30vh;
    padding: 20px 0;
    background-size: 100% 100%;
    background-image: url("../../../public/images/background_nav.png");
    position: absolute;
    z-index: 11;
}

.headerBlacK {
    background-image: url("../../../public/images/headerBlack.png");
}

.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.5s;
}

.fade-enter,
.fade-leave-to {
    opacity: 0;
}

.header_nav ul {
    display: flex;
    justify-content: space-between;
    width: 60vw;
    color: white;
    font-size: 20px;
}

.header_nav ul li div {
    margin: 3vh 0;
}

.nav ul li:hover {
    color: orange;
    cursor: pointer;
}

.header_nav ul li div:hover {
    color: orange;
    cursor: pointer;
}

/*********  主体部分 **********/
</style>